<template>
    <div class="legWrapper">
        <HandAni></HandAni>
        <div class="wrapper" :class="{smaller: isSmaller}">
          <div class="anim-box">
            <div class="person"></div>

            <div v-for="star in stars" :class="[`star${star}`, {scaleMove: hideIndex == star}]" class="star"></div>
            <div v-for="heart in stars" :class="[`heart${heart}`, {scaleMove: hideIndex - 2 == heart}]" class="heart"></div>

            <div class="lPerson"></div>
            <div class="lWires" :class="{lWiresMove: showAni}" v-show="showAni"></div>
            <div class="lHeart" :class="{lHeartMove: showAni}" v-show="showAni"></div>

            <div class="rPerson"></div>
            <div class="rWires" :class="{rWiresMove: showAni}" v-show="showAni"></div>
            <div class="rHeart" :class="{rHeartMove: showAni}" v-show="showAni"></div>

            <div class="btn" @touchend="toJie()"></div>
          </div>
        </div>

    </div>
</template>

<script>
    import HandAni from './handAni.vue';
    export default {
        props: ['resources', 'pageType', 'jieImg'],
        data() {
            return{
                stars: [1,2],
                hideIndex: 0,
                showAni: false,
              isSmaller: false,
            }
        },
        mounted() {

          var clientWidth = document.documentElement.clientWidth;
          var clientHeight = document.documentElement.clientHeight;
          this.isSmaller = clientWidth/clientHeight > 0.66 ? true : false;
          console.log(clientWidth/clientHeight, this.isSmaller);

          setTimeout(() => {
                this.showAni = true;
            }, 1000);
            setInterval(() => {
                let index = Math.floor(Math.random()*4) +1 ;
                this.hideIndex = index;
            }, 1000);
        },
        methods: {
            toJie() {
                console.log('jie', this.jieImg);
                this.$emit('update:jieImg', 'legJie');
                this.$emit('update:pageType', 'jie');
            }

        },
        components: {
            HandAni
        }
    }
</script>
<style lang="less" scoped>
    .legWrapper{
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: bottom;
        .wrapper{
            height: 100%;
            width: 100%;
            background-image: url("../../img/leg/legText.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: bottom;
            position: absolute;
          .anim-box {
            position: absolute;
            top: 0.8rem;
            width: 100%;
            height: 100%;
            .btn {
              width: 2.56rem;
              height: 2.56rem;
              position: absolute;
              left: 3.71rem;
              bottom: 1.9rem;
            }
            .person {
              width: 2.84rem;
              height: 3.43rem;
              position: absolute;
              bottom: 6.44rem;
              left: 2.72rem;
              background-image: url("../../img/leg/runLeft.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: changePerson 2s infinite;
              animation: changePerson 2s infinite;
            }
            @keyframes changePerson {
              0%, 55% {
                transform: rotateY(0deg);
              }

              5% {
                transform: rotateY(180deg);
                left: 2.72rem;
              }

              50% {
                transform: rotateY(180deg);
                left: 4.72rem;
              }

              100% {
                left: 2.72rem;
              }
            }
            @-webkit-keyframes changePerson {
              0%, 55% {
                transform: rotateY(0deg);
              }

              5% {
                transform: rotateY(180deg);
                left: 2.72rem;
              }

              50% {
                transform: rotateY(180deg);
                left: 4.72rem;
              }

              100% {
                left: 2.72rem;
              }
            }

            .heart1 {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 7.47rem;
              left: 2.02rem;
              background-image: url("../../img/leg/heart1.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .heart2 {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 9.65rem;
              left: 2.64rem;
              background-image: url("../../img/leg/heart2.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }

            .star1 {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 9.59rem;
              left: 6.08rem;
              background-image: url("../../img/leg/legStar1.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star2 {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 8.53rem;
              left: 7.51rem;
              background-image: url("../../img/leg/legStar2.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }

            .scaleMove {
              -webkit-animation: scaleMove 1s infinite;
              animation: scaleMove 1s infinite;
            }
            @keyframes scaleMove {
              50% {
                transform: scale(0.5);
              }
            }
            @-webkit-keyframes scaleMove {
              50% {
                transform: scale(0.5);
              }
            }

            .lPerson {
              width: 1.39rem;
              height: 1.67rem;
              position: absolute;
              bottom: 7.33rem;
              left: 0px;
              background-image: url("../../img/leg/lPerson.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: lPerson 1s;
              animation: lPerson 1s;
            }
            @keyframes lPerson {
              0% {
                left: -1.39rem;
              }
              100% {
                left: 0;
              }
            }
            @-webkit-keyframes lPerson {
              0% {
                left: -1.39rem;
              }
              100% {
                left: 0;
              }
            }

            .rPerson {
              width: 1.39rem;
              height: 1.67rem;
              position: absolute;
              bottom: 7.33rem;
              right: 0;
              background-image: url("../../img/leg/rPerson.png");
              background-size: 100%;
              -webkit-animation: rPerson 1s;
              animation: rPerson 1s;
            }
            @keyframes rPerson {
              0% {
                right: -1.39rem;
              }
              100% {
                right: 0;
              }
            }
            @-webkit-keyframes rPerson {
              0% {
                right: -1.39rem;
              }
              100% {
                right: 0;
              }
            }

            .lWires {
              width: 0.52rem;
              height: 0.31rem;
              position: absolute;
              bottom: 8.19rem;
              left: 1.48rem;
              background-image: url("../../img/leg/wires.png");
              background-size: 100%;
            }
            .lWiresMove {
              -webkit-animation: lWires 1s infinite;
              animation: lWires 1s infinite;
            }
            @keyframes lWires {
              0% {
                opacity: 0;
                left: 0.93rem;
                transform: scale(0.3);
              }
              100% {
                opacity: 1;
                left: 1.48rem;
                transform: scale(1);
              }
            }
            @-webkit-keyframes lWires {
              0% {
                opacity: 0;
                left: 0.93rem;
                transform: scale(0.3);
              }
              100% {
                opacity: 1;
                left: 1.48rem;
                transform: scale(1);
              }
            }

            .rWires {
              width: 0.52rem;
              height: 0.31rem;
              position: absolute;
              bottom: 8.15rem;
              left: 8.07rem;
              background-image: url("../../img/leg/wires.png");
              background-size: 100%;
            }
            .rWiresMove {
              -webkit-animation: rWires 1s infinite;
              animation: rWires 1s infinite;
            }
            @keyframes rWires {
              0% {
                opacity: 0;
                left: 8.4rem;
                transform: scale(0.3);
              }
              100% {
                opacity: 1;
                left: 8.07rem;
                transform: scale(1);
              }
            }
            @-webkit-keyframes rWires {
              0% {
                opacity: 0;
                left: 8.4rem;
                transform: scale(0.3);
              }
              100% {
                opacity: 1;
                left: 8.07rem;
                transform: scale(1);
              }
            }

            .lHeart {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 8.15rem;
              left: 2.13rem;
              background-image: url("../../img/leg/lHeart.png");
              background-size: 100%;
            }
            .lHeartMove {
              -webkit-animation: lHeart 1s infinite;
              animation: lHeart 1s infinite;
            }
            @keyframes lHeart {
              0% {
                opacity: 0;
                left: 1.3rem;
                transform: scale(0.2);
              }
              100% {
                opacity: 1;
                left: 2.13rem;
                transform: scale(1);
              }
            }
            @-webkit-keyframes lHeart {
              0% {
                opacity: 0;
                left: 1.3rem;
                transform: scale(0.2);
              }
              100% {
                opacity: 1;
                left: 2.13rem;
                transform: scale(1);
              }
            }

            .rHeart {
              width: 0.43rem;
              height: 0.44rem;
              position: absolute;
              bottom: 8.15rem;
              left: 7.52rem;
              background-image: url("../../img/leg/rHeart.png");
              background-size: 100%;
            }
            .rHeartMove {
              -webkit-animation: rHeart 1s infinite;
              animation: rHeart 1s infinite;
            }
            @keyframes rHeart {
              0% {
                opacity: 0;
                left: 8.07rem;
                transform: scale(0.2);
              }
              100% {
                opacity: 1;
                left: 7.52rem;
                transform: scale(1);
              }
            }
            @-webkit-keyframes rHeart {
              0% {
                opacity: 0;
                left: 8.07rem;
                transform: scale(0.2);
              }
              100% {
                opacity: 1;
                left: 7.52rem;
                transform: scale(1);
              }
            }
          }
        }
        .smaller{
            top: 1.1rem;
        }

    }
</style>
